<template>
  <div class="_fc_fetch">
    <form-create v-model="api" :value="formValue" :rule="rule" :option="option" @change="input" />
  </div>
</template>

<script>
import debounce from '@form-create/utils/lib/debounce'
import is from '@form-create/utils/lib/type'

export default {
  name: 'Fetch',
  props: {
    value: [Object, String],
    to: String
  },
  computed: {
    formValue() {
      const val = this.value
      if (!val) return {}
      if (is.String(val)) {
        return {
          action: val
        }
      }
      if (!val._parse && val.parse) {
        return { ...val, _parse: '' + val.parse }
      } else if (is.Function(val._parse)) {
        return { ...val, _parse: '' + val._parse }
      }
      return val
    }
  },
  data() {
    return {
      api: {},
      fetch: {},
      option: {
        form: {
          labelPosition: 'right',
          size: 'mini',
          labelWidth: '90px'
        },
        submitBtn: false
      },
      rule: [
        {
          type: 'input',
          field: 'action',
          title: '接口: ',
          validate: [{ required: true, message: '请数据接口' }]
        },
        {
          type: 'select',
          field: 'method',
          title: '请求方式: ',
          value: 'GET',
          options: [
            { label: 'GET', value: 'GET' },
            { label: 'POST', value: 'POST' }
          ]
        },
        {
          type: 'Struct',
          field: 'data',
          title: '附带数据: ',
          value: {},
          props: {
            defaultValue: {}
          }
        },
        {
          type: 'Struct',
          field: 'headers',
          title: 'header信息: ',
          value: {},
          props: {
            defaultValue: {}
          }
        },
        {
          type: 'input',
          field: '_parse',
          title: '解析函数',
          info: '解析接口数据，返回组件所需的数据结构',
          value: 'function (res){\n   return res.data;\n}',
          props: {
            type: 'textarea',
            rows: 8
          },
          validate: [
            {
              validator: (_, v, cb) => {
                if (!v) return cb()
                try {
                  this.parseFn(v)
                } catch (e) {
                  return cb(false)
                }
                cb()
              },
              message: '请输入正确的解析函数'
            }
          ]
        }
      ]
    }
  },
  methods: {
    parseFn(v) {
      return eval(`(function(){return ${v} })()`)
    },
    _input() {
      this.api.submit((formData) => {
        formData.to = this.to || 'options'
        if (formData._parse) formData.parse = this.parseFn(formData._parse)
        this.$emit('input', formData)
      })
    },
    input: debounce(function () {
      this._input()
    }, 1500)
  },
  mounted() {
    this._input()
  }
}
</script>
<style>
._fc_fetch .el-form-item__label {
  float: left;
  display: inline-block;
  text-align: right;
  padding-right: 5px;
}

._fc_fetch {
  background-color: #bfdaf7;
  padding: 10px;
}
</style>
